<template>
	<view>
		<view class="scoll">
			<shop-scroll
			  id="scroll"
			  style="width: 100%;" 
			  bg-color="#ffffff"
			  :bold="true"
			  :active-color="activeColor"
			  :list="classfiy"
			  :showBar="false"
			  :showX="true"
			  @change="Scrochange" 
			  :current="current" 
			  :is-scroll="isScroll" 
			  :offset="offset">
			</shop-scroll>
			<view class="erji">
				<shop-scr
				  v-if="classfiyTwo.length"
				  id="scroll1"
				  style="width: 100%;height: 100%;" 
				  bg-color="#ffffff"
				  :bold="false"
				  :list="classfiyTwo"
				  :active-color="activeColor"
				  :showBar="false"
				  :showX="false"
				  @change="Scrochange1" 
				  :current="tabIndex" 
				  :is-scroll="true" 
				  :offset="offsetl">
				</shop-scr>
				<image v-else :src="classfiyImg" class="erji-banner"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import shopScroll from '@/components/shop-scroll.vue';
	import shopScr from '@/components/shop-scr.vue';
	export default {
		props:{
			classfiy:{
				type:Array,
				default:()=>{
					return [];
				}
			},
			classify_id:{
				type:Number,
				default:0
			},
			classfiyImg:{
				type:String,
				default:''
			}
		},
		watch:{
			classify_id(newval){
				this.classifyId = newval
			},
			classifyId(newValue, oldvalue){
				// this.$emit('update:classify_id', newValue)
			},
		},
		computed:{
			classfiyTwo(){
				const {classfiy,current} = this;
				let data = [];
				if(classfiy.length){
					let list = classfiy[current] ? classfiy[current].child : classfiy[0].child;
					if(list.length){
						data = list;
					}else{
						data = [];
					}
				}
				return data;
			}
		},
		components:{
			shopScroll,shopScr
		},
		data() {
			return {
				isScroll:true,
				activeColor:'#BF3736',
				current:0,
				offset:[4],
				offsetl:[6],
				tabIndex:0,
				list:[],
				neList:[],
				left:0,
				menuId:1,
				classifyId:0
			};
		},
		methods:{
			Scrochange(e){
				// console.log('一级',this.classfiy[e].id)
				this.current = e;
				this.tabIndex = 0;
				this.classifyId = this.classfiy[e].id;
				this.$emit('successClass',this.classfiy[e].id);
			},
			Scrochange1(e){
				// console.log('二级')
				this.tabIndex = e;
				this.classifyId = this.classfiyTwo[e].id;
				this.$emit('successClass',this.classfiyTwo[e].id);
			},
			tapMenu(item,index){
				//   var w = uni.getSystemInfoSync().windowWidth;
				// 　var leng=this.list.length;
				// 　var disX = (index - 1) * w / leng;
				　if(item.id != this.menuId){
				　　this.menuId = item.id;
				　}
				  // this.left = disX;
			}
		}
	}
</script>

<style lang="scss">
	.erji{
		// height:2upx;
		padding:10upx 24upx;
		box-sizing: border-box;
		border-top: 2upx solid #EEEEEE;
		background-color: #FFFFFF;
		overflow: hidden;
		.erji-banner{
			width: 100%;
			height:155upx;
		}
	}
	.scoll-view{
		white-space: nowrap;
		padding: 10upx 24upx 0 0;
		box-sizing: border-box;
		background-color: #FFFFFF;
		.scoll-li{
			padding: 0 50upx;
			display: inline-block;
			text-align: center;
			// margin-right: 70upx;
		}
		.lat{
			width:48upx;
			height:20upx;
			display: block;
			margin:10upx auto;
		}
		.scoll-active{
			color:$them-page-color !important;
			font-weight: bold;
		}
	}
	.scoll-view1{
		white-space: nowrap;
		padding:30upx 24upx 20upx 0;
		box-sizing: border-box;
		// margin: 15upx 0;
		background-color: #FFFFFF;
		.scoll-li{
			padding: 0 50upx;
			display: inline-block;
			text-align: center;
		}
		.yiwu{
			width: 68upx;
			height: 86upx;
			display: block;
			margin-bottom: 27upx;
		}
	}
</style>
